<template>
  <div class="interface_create">
    <!-- 卡片视图 -->
    <el-card>
      <el-page-header @back="goBack" content="新增接口" style="margin-bottom:40px"> </el-page-header>
      <el-form :model="form" :rules="rules" ref="form"  label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" clearable placeholder="请输入内容"  maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="form.status" clearable placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="url">
          <el-input v-model="form.url" clearable placeholder="请输入内容" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="调用限制次数" prop="limitTimes">
          <el-input v-model="form.limitTimes" clearable placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName" >
          <el-input v-model="form.userName" clearable placeholder="请输入内容" maxlength="8" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="模型ID" prop="moduleId">
          <el-input v-model="form.moduleId" clearable placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" clearable placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <div style="text-align:center">
        <el-button-group style="align:center">
          <el-button size="medium" @click="backInterface">取消</el-button>
          <el-button type="primary" size="medium" @click="addInterface">确定</el-button>
        </el-button-group>
      </div>
    </el-card>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      form: [],
      //表单验证
       rules: {
                name: [
                     { required: true, message: '请输入接口名称', trigger: 'blur' },
                     { min: 3, max: 8, message: '接口长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                url: [
                     { required: true, message: '请输入接口地址', trigger: 'blur' },
                     { min: 3, max: 8, message: '接口地址在 3 到 30 个字符', trigger: 'blur' }
                ],
                userName: [
                     { required: true, message: '请输入用户名', trigger: 'blur' },
                     { min: 3, max: 8, message: '用户名长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                // password: [
                //     { required: true, message: '请输入密码', trigger: 'blur' },
                //     { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                // ],
                // email: [
                //     { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                //     { validator: checkEmail, trigger: 'blur' }
                // ],
                // mobile: [
                //     { required: true, message: '请输入手机号', trigger: 'blur' },
                //     { validator: checkMobile, trigger: 'blur' }
                // ]
            }
    };
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    goBack() {
      this.$router.back();
    },
    //添加接口
    addInterface(){
        let url = "http://39.106.31.187:8888/interfaces/saveOrUpdate";
        post(url,this.form).then(resp => {
       // this.form = resp.data;
         this.$message.success("操作成功");
        // this.$router.push({
        //     path:'/interface/interface'
        // })
      this.goBack();
      });
    },
    //取消添加
    backInterface(){
        this.$router.back();
    }
  },
  //请求数据
  created() {
    //1.获取路由参数


    //2.将参数提交给后台
    this.form = this.$route.query;
  }
};
</script>

<style scoped></style>
